import React, { Component } from "react";

class App extends Component {
  state = {
    name: "xiangge",
    count: 10,
    list: [1, 2, 3, 4, 5],
  };

  fn() {
    // react中不能直接修改数据
    // this.state.name = "laogao";
    // console.log(this.state.name);

    // setState合并对象，重新渲染页面
    // this.setState({
    //   name: "laogao",
    // });
    // this.setState({
    //   count: this.state.count + 1,
    // });

    // setState是异步执行的函数
    // setState还可以接受第二个参数回调函数
    // 这个回调函数会在数据修改完以后执行
    // this.setState(
    //   {
    //     name: "laogao",
    //   },
    //   () => {
    //     console.log(this.state.name);
    //     console.log(document.querySelector("#name").innerHTML);
    //   }
    // );

    // setState的第一个参数还可以是函数
    // 当确定要修改成某一个值的时候，直接写成对象的形式，更加简单
    // 当这一次的修改要依赖于前一次值的时候，建议写成函数，更加安全
    // this.setState(
    //   (prevState) => {
    //     return {
    //       count: prevState.count + 1,
    //     };
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );
    // 当省略大括号和return的时候，需要加上小括号
    // this.setState((prevState) => ({
    //   count: prevState.count + 1,
    // }));

    // this.setState((prevState) => {
    //   return {
    //     // list: prevState.list.concat(9),
    //     list: [...prevState.list, 9],
    //   };
    // });

    // 在不改变复杂数据类型地址的情况下，可以这么做
    this.state.list.push(9);
    this.setState({});
  }

  render() {
    // const { name } = this.state;
    const {
      state: { name },
    } = this;

    return (
      <>
        <h2>修改state的数据</h2>
        <p id="name">name: {name}</p>
        <button onClick={this.fn.bind(this)}>btn</button>

        <hr />

        <p>count: {this.state.count}</p>

        <ul>
          {this.state.list.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </>
    );
  }

  /*
    setState同步还是异步

    现在的18版本，所有情况下都是异步的
    18版本以前，在事件处理函数或者生命周期是异步的
    在定时器或者原生js事件监听中是同步的
  */

  // componentDidMount() {
  // setTimeout(() => {
  //   this.setState({
  //     count: 20,
  //   });
  //   console.log(this.state.count);
  // }, 2000);

  // window.addEventListener("xxx", () => {
  //   this.setState({
  //     count: 20,
  //   });
  //   console.log(this.state.count);
  // });
  // }
}

export default App;
